window.onload = function(){
  var next = document.querySelector("#next")
  var pre = document.querySelector("#pre")
  var circles = document.querySelectorAll(".circle")
  var lines = document.querySelectorAll(".line")
  var num = 0;
  next.addEventListener("click",function(){
    next.classList.add('btnactive')
    pre.classList.remove('btnactive') 
    console.log(num)
    if(num == 3 ){
      next.classList.remove('btnactive')
      pre.classList.add('btnactive')
      return
    }
    if(num == 2 ){
      
      circles[num+1].classList.add('activecircle')
      lines[num].classList.add('activeline')
      num++;
      return
    }
    circles[num+1].classList.add('activecircle')
    lines[num].classList.add('activeline')
    num++;
  })


  pre.addEventListener('click',function(){
    pre.classList.add('btnactive')
    next.classList.remove('btnactive')
    console.log(num)
    if(num == 0 ){
      pre.classList.remove('btnactive')
      next.classList.add('btnactive')
      circles[num+1].classList.remove('activecircle')
      lines[num].classList.remove('activeline')
      return
    }
    num--;
    circles[num+1].classList.remove('activecircle')
    lines[num].classList.remove('activeline')
    
  })



  function showbtn(index){
    if(index == 0){
      document.querySelector("#next").classList.add('btnactive')
      document.querySelector("#pre").classList.remove('btnactive')
    }else if(index == 3){
      document.querySelector("#pre").classList.add('btnactive')
      document.querySelector("#next").classList.remove('btnactive')
    }
  }
}